<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双表单提交页面</title>
    {% load static %}
    <link rel='stylesheet' href="{% static 'css/my3.css' %}" />
</head>
<body>
    <!-- 第一个表单：日期范围（仅日期，无小时）+ 车型 -->
    <div class="form-group">
        <form id="dateRangeForm" class="form-container" method="get">
            <label>开始日期：</label>
            <input type="date" id="start_date" name="start_date" required>

            <label>结束日期：</label>
            <input type="date" id="end_date" name="end_date" required>

            <label>车型：</label>
            <input type="text" name="car_type" placeholder="输入车型，空则查询所有">
            <input type="submit" value="提交日期范围查询">
            <!-- 错误提示放在表单内部，避免混淆 -->
            <div class="error-message" id="rangeTimeError">错误：结束日期不能早于开始日期</div>
        </form>

        <form id="hourRangeForm" class="form-container" method="get">
            <label>目标日期：</label>
            <input type="date" id="single_date" name="single_date" required>

            <label>开始小时：</label>
            <!-- 修改name属性为start_hour，与后端保持一致 -->
            <select id="hour_start" name="start_hour" class="hour-select" required>
                <!-- 小时选项通过JS生成 -->
            </select>

            <label>结束小时：</label>
            <!-- 修改name属性为end_hour，与后端保持一致 -->
            <select id="hour_end" name="end_hour" class="hour-select" required>
                <!-- 小时选项通过JS生成 -->
            </select>

            <label>车型：</label>
            <input type="text" name="hour_car_type" placeholder="输入车型">
            <input type="submit" value="提交小时范围查询">
            <div class="error-message" id="hourTimeError">错误：结束小时不能早于开始小时</div>
        </form>
    </div>

    <!-- 信息显示区域 -->
    <div class="info-display" id="infoDisplay"></div>
    <div id="analysisContainer">
        <!-- 生成command_success_analysis.html后，在该div刷新显示这个html -->
        {% if result_html %}
            {% include "command_success_analysis.html" %}
        {% endif %}
    </div>

    <script>
        // 格式化日期、获取日期等工具函数（保持不变）
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        function getYesterday() {
            const yesterday = new Date();
            yesterday.setDate(yesterday.getDate() - 1);
            return yesterday;
        }
        function getToday() {
            return new Date();
        }
        function populateHourOptions(selectId, defaultHour) {
            const select = document.getElementById(selectId);
            select.innerHTML = '';
            for (let i = 0; i < 24; i++) {
                const option = document.createElement('option');
                const hourStr = i.toString().padStart(2, '0');
                option.value = hourStr;
                option.textContent = `${hourStr}:00`;
                if (i === defaultHour) option.selected = true;
                select.appendChild(option);
            }
        }

        <!-- 在原有script标签内的DOMContentLoaded事件中添加 -->
        document.addEventListener('DOMContentLoaded', function() {
            // 原有初始化代码保持不变
            const yesterday = getYesterday();
            const today = getToday();

            // 检查是否有需要回填的表单数据
            const dateFormData = {{ date_form_data|default:"null"|safe }};
            if (dateFormData) {
                // 回填日期范围表单
                document.getElementById('start_date').value = dateFormData.start_date || formatDate(yesterday);
                document.getElementById('end_date').value = dateFormData.end_date || formatDate(today);
                document.querySelector('#dateRangeForm input[name="car_type"]').value = dateFormData.car_type || '';
            } else {
                // 默认初始化
                document.getElementById('start_date').value = formatDate(yesterday);
                document.getElementById('end_date').value = formatDate(today);
            }

            // 小时表单初始化保持不变
            document.getElementById('single_date').value = formatDate(today);
            populateHourOptions('hour_start', 0);
            populateHourOptions('hour_end', 23);
        });

        <!-- 修改第一个表单的提交事件处理 -->
        document.getElementById('dateRangeForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const errorElement = document.getElementById('rangeTimeError');
            errorElement.style.display = 'none';

            // 获取表单数据
            const startDate = document.getElementById('start_date').value;
            const endDate = document.getElementById('end_date').value;
            const carType = this.querySelector('input[name="car_type"]').value;

            // 验证逻辑
            if (!startDate || !endDate) {
                alert('请选择完整的日期范围');
                return;
            }
            const start = new Date(startDate).getTime();
            const end = new Date(endDate).getTime();
            if (end < start) {
                errorElement.style.display = 'block';
                return;
            }

            // 直接提交表单刷新页面（后端处理后会返回新的index3.html）
            this.action = '/query-date-type/';  // 设置表单提交地址
            this.method = 'GET';
            this.submit();  // 提交表单
        });

        // 第二个表单：小时范围提交（修改请求地址和数据处理）
        document.getElementById('hourRangeForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const errorElement = document.getElementById('hourTimeError');
            errorElement.style.display = 'none';

            // 获取表单数据
            const targetDate = document.getElementById('single_date').value;
            const startHour = document.getElementById('hour_start').value;
            const endHour = document.getElementById('hour_end').value;
            const carType = this.querySelector('input[name="hour_car_type"]').value;

            // 验证逻辑
            if (!targetDate) {
                alert('请选择目标日期');
                return;
            }
            if (parseInt(endHour) < parseInt(startHour)) {
                errorElement.style.display = 'block';
                return;
            }

            // 改为直接表单提交（与日期范围表单保持一致的方式）
            this.action = '/query-time-type/';
            this.method = 'GET';
            this.submit();
        });

        <!-- 修改DOMContentLoaded事件中的回填逻辑 -->
        document.addEventListener('DOMContentLoaded', function() {
            const yesterday = getYesterday();
            const today = getToday();

            // 检查是否有需要回填的表单数据
            const dateFormData = {{ date_form_data|default:"null"|safe }};
            if (dateFormData) {
                // 回填日期范围表单
                document.getElementById('start_date').value = dateFormData.start_date || formatDate(yesterday);
                document.getElementById('end_date').value = dateFormData.end_date || formatDate(today);
                document.querySelector('#dateRangeForm input[name="car_type"]').value = dateFormData.car_type || '';

                // 新增：回填小时范围表单
                document.getElementById('single_date').value = dateFormData.single_date || formatDate(today);
                // 回填小时选择器
                if (dateFormData.start_hour) {
                    populateHourOptions('hour_start', parseInt(dateFormData.start_hour));
                } else {
                    populateHourOptions('hour_start', 0);
                }
                if (dateFormData.end_hour) {
                    populateHourOptions('hour_end', parseInt(dateFormData.end_hour));
                } else {
                    populateHourOptions('hour_end', 23);
                }
                // 回填小时表单的车型
                document.querySelector('#hourRangeForm input[name="hour_car_type"]').value = dateFormData.hour_car_type || '';
            } else {
                // 默认初始化
                document.getElementById('start_date').value = formatDate(yesterday);
                document.getElementById('end_date').value = formatDate(today);
                document.getElementById('single_date').value = formatDate(today);
                populateHourOptions('hour_start', 0);
                populateHourOptions('hour_end', 23);
            }
        });

        // 错误提示清除逻辑（保持不变）
        document.getElementById('end_date').addEventListener('change', function() {
            document.getElementById('rangeTimeError').style.display = 'none';
        });
        document.getElementById('hour_end').addEventListener('change', function() {
            document.getElementById('hourTimeError').style.display = 'none';
        });
    </script>
</body>
</html>